<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />
		<link rel="stylesheet" href="css/map.css" />
		<script src="js/ol.js" type="text/javascript"></script>
		<script src="js/turf.min.js" type="text/javascript"></script>
		<script src="js/echarts.min.js" type="text/javascript"></script>
		<script src="http://120.24.241.113:8080/arcgis_js_api/library/3.14/3.14/init.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script src="js/kriging.js" type="text/javascript"></script>
		<script src="js/TDTRoadLayer.js" type="text/javascript"></script>
		<script>
			var map = null;
			var weatherlayer = null;

			var toolbar;
			var enableclick = true; //是否可点击
			var enableedit = 0; //编辑类型，1测量/2编辑要素
			require([
				"esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/layers/GraphicsLayer",
				"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/Polygon", "esri/symbols/SimpleFillSymbol"
			], function(Map, Point, SpatialReference, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Polygon, SimpleFillSymbol) {
				map = new Map("map", {
					center: [105.5, 30.6],
					slider: false,
					zoom: 9
				});
				map.on('load', createToolbar);
				defineClassesBeforInitMap();
				var layer = new TDTRoadLayer();
				var annolayer = new TDTAnnoLayer();
				var imglayer = new TDTImageLayer();
				var imgannolayer = new TDTImgAnnoLayer();
				map.addLayer(layer);
				map.addLayer(annolayer);

				commonTool();

				function commonTool() {
					$('.zoom-in').on('click', function() {
						if(map.getZoom() < map.getMaxZoom()) {
							map.setZoom(map.getZoom() + 1);
						}
					})
					$('.zoom-out').on('click', function() {
						if(map.getZoom() > map.getMinZoom()) {
							map.setZoom(map.getZoom() - 1);
						}
					})
				}

			});

			function createToolbar() {
				require([
					"esri/toolbars/draw"
				], function(Draw) {
					toolbar = new Draw(map);
					toolbar.on('draw-end', drawToMap)
				});
			}

			function activeTool(gettype) {
				require([
					"esri/toolbars/draw"
				], function(Draw) {
					toolbar.activate(Draw[gettype]);
					enableclick = false;
				});
			}

			function drawToMap(event) {
				switch(enableedit) {
					case 1:
						measureMap(event);
						break;
					case 2:
						addGraphicToMap(event)
						break;
				}
			}
			//绑定点击事件
			function bindEvent() {
				//图层选择
				$("#checkbox>li>input").click(function() {
					//获取当前点击的checkbox的id
					var cheackId = $(this).attr("id");
					var dataid = parseInt($(this).attr("data-id"));

					//判断是否被选中
					layerOpenClose(cheackId, dataid);
				});
				$('#roadnetworktool').on('click', function() {
					$(this).css('color', '#2C9EFF');
					$('#planettool').css('color', '#7B8095');
					tdtlayer.show();
					tdtimglayer.hide();
					tdtannolayer.show();
				})
				$('#planettool').on('click', function() {
					$(this).css('color', '#2C9EFF');
					$('#roadnetworktool').css('color', '#7B8095');
					tdtlayer.hide();
					tdtimglayer.show();
					tdtannolayer.hide();
				})
				$('#zoomouttool').on('click', function() {
					var max = map.getMaxZoom();
					var zoom = map.getZoom();
					if(zoom < max) {
						map.setZoom(zoom + 1);
					}
				})
				$('#zoomintool').on('click', function() {
					var min = map.getMinZoom();
					var zoom = map.getZoom();
					if(zoom > min) {
						map.setZoom(zoom - 1);
					}
				})
				$('#fullextenttool').on('click', function() {
					var fullExtent = new esri.geometry.Extent(104.15612007614814, 30.5668712213286, 104.38794217718669, 30.629864300227977, map.spatialReference);
					map.setExtent(fullExtent);
				})
				$('#distancetool').on('click', function() {
					enableedit = 1;
					activeTool('POLYLINE');
				})
				$('#areatool').on('click', function() {
					enableedit = 1;
					activeTool('POLYGON');
				})
				$('#cleartool').on('click', function() {
					map.graphics.clear();
				})

			}

			function addGraphicToMap(event) {
				require([
					"esri/symbols/SimpleMarkerSymbol",
					"esri/symbols/SimpleLineSymbol",
					"esri/symbols/SimpleFillSymbol"
				], function(SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
					var symbol;
					toolbar.deactivate();
					var symbol = new esri.symbol.PictureMarkerSymbol(iconpath, 32, 32);
					var graphic = new esri.Graphic(event.geometry, symbol);
					pointlayer.add(graphic);
				});
			}

			function measureMap(event) {
				require([
					"esri/symbols/SimpleMarkerSymbol",
					"esri/symbols/SimpleLineSymbol",
					"esri/symbols/SimpleFillSymbol",
					"esri/geometry/geometryEngine", "esri/symbols/TextSymbol", "esri/Color", "esri/symbols/Font"
				], function(SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, geometryEngine, TextSymbol, Color, Font) {
					var symbol;
					toolbar.deactivate();
					var text = "";
					var point;
					switch(event.geometry.type) {
						case "point":
						case "multipoint":
							symbol = new SimpleMarkerSymbol();
							break;
						case "polyline":
							symbol = new SimpleLineSymbol();
							break;
						default:
							symbol = new SimpleFillSymbol();
							break;
					}
					var graphic = new esri.Graphic(event.geometry, symbol);
					map.graphics.add(graphic);

					var geom = deepClone(event.geometry);
					switch(geom.type) {
						case "polyline":
							geom.spatialReference = {
								wkid: 4326
							};
							text = geometryEngine.geodesicLength(geom, "meters");
							if(text > 1000) {
								text = (text / 1000).toFixed(2) + "千米";
							} else {
								text = text.toFixed(2) + "米";
							}
							var paths = geom.paths;
							point = new esri.geometry.Point(paths[0][paths[0].length - 1][0], paths[0][paths[0].length - 1][1]);
							break;
						default:
							geom.spatialReference = {
								wkid: 4326
							};
							text = geometryEngine.geodesicArea(geom, "square-meters");
							if(text > 1000000) {
								text = (text / 1000000).toFixed(2) + "平方千米";
							} else {
								text = text.toFixed(2) + "平方米";
							}
							var rings = geom.rings;
							point = new esri.geometry.Point(rings[0][rings[0].length - 2][0], rings[0][rings[0].length - 2][1]);
							break;
					}

					var font = new Font();
					font.setSize('12pt');
					font.setWeight(Font.WEIGHT_BOLD);
					var textymbol = new TextSymbol(text).setColor(new Color([0, 0, 0])).setOffset(0, 0).setFont(font);
					var textgraphic = new esri.Graphic(point, textymbol);
					map.graphics.add(textgraphic);
					enableclick = true;
				});
			}
		</script>
	</head>

	<body>
		<div id="map">
			<div class="slider-box">
				<div class="zoom-in zoombtn">
					<span>+</span>
				</div>
				<div class="zoom-out zoombtn">
					<span>-</span>
				</div>
			</div>
			<div class="operatebar commontool">
				<div class="middlebox">
					<div class="editbtn" id="edittool">
						<i class="iconfont icon-bianji"></i>
						<span>编辑</span>
					</div>
					<div class="editbtn" id="layerstool">
						<i class="iconfont icon-tuceng"></i>
						<span>图层</span>
					</div>
					<div class="editbtn" id="overduetool">
						<i class="iconfont icon-yuqi"></i>
						<span>逾期</span>
					</div>
					<div class="editbtn" id="fullextenttool">
						<i class="iconfont icon-quantu"></i>
						<span>全图</span>
					</div>
					<div class="editbtn" id="distancetool">
						<i class="iconfont icon-celiang1"></i>
						<span>测距</span>
					</div>
					<div class="editbtn" id="areatool">
						<i class="iconfont icon-mianji"></i>
						<span>面积</span>
					</div>
					<div class="editbtn" id="cleartool">
						<i class="iconfont icon-clean"></i>
						<span>清除</span>
					</div>
					<div class="editbtn" id="printtool" style="border: none;">
						<i class="iconfont icon-dayins"></i>
						<span>打印</span>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>